<template>
	<view class="content">
		<!--顶部导航-->
		<view class="content_1" :style="{'height':titleBarHeight + 'px'}" @click="GoToMiniProgram(1)">
			<view class="title_1" :style="{'margin-top':top + 'px'}">
				有店优惠券1
			</view>
		</view>
		<!--占位-->
		<view :style="{height:spaceHeight +'px'}"></view>
		<!--搜索框-->
		<view class="content_2">
			<view class="search">
				<image class="search_icon" src="../../static/index/search_icon.png" mode="scaleToFill"></image>
				<input class="search_input" placeholder="搜索本店优惠券" placeholder-style="color:#F8DDD6" />
			</view>
			<view class="services">
				<image class="services_icon" src="../../static/index/service.png" mode="scaleToFill"></image>
				<!-- <view class="services_text">客服</view> -->
				<button open-type='contact' session-from='' class="services_text" plain="true">客服</button>
			</view>
		</view>
		<!--轮播-->
		<view class="content_3">
			<swiper class="bunner_view" indicator-dots="true" indicator-active-color="#ffffff" circular="true" autoplay="true">
				<block v-for="(bunner, index_bunner) in bunnerList" :key="index_bunner">
					<swiper-item>
						<image class="img_3" :src="bunner.img" mode="scaleToFill"></image>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<!--分类-->
		<view class="content_4">
			<block v-for="types, index_types in typesList" :key="index_types">
				<view class="types_view" v-on:click="GoToPage(index_types)">
					<image class="types_icon" :src="types.typeicon" mode="aspectFill"></image>
					<view class="types_text">{{types.typename}}</view>
				</view>
			</block>
		</view>
		<!--品牌团购-->
		<view class="content_5">
			<view class="title_5">
				<view class="title_5_text">品牌团购</view>
				<view class="title_5_icon">疯抢中</view>
			</view>
			<scroll-view scroll-x class="tuangou_view" @scroll="moveScroll">
				<block v-for="(tuangou, index_tuangou) in tuangouList" :key="index_tuangou">
					<view class="tuangou_type" @click="GoToMiniProgram(index_tuangou)">
						<view class="tuangou_type_icon">
							<!-- <image style="height: 80upx; width: 80upx; border-radius: 80upx;" :src="tuangou.tuangouicon"></image> -->
							<image style="height: 80upx; width: 80upx; border-radius: 80upx;" :src="localImge"></image>
						</view>
						<view class="tuangou_type_text">{{tuangou.tuangouname}}</view>
					</view>
				</block>
			</scroll-view>
			<!--滚动条-->
			<view class="scroll_line">
				<view class="scroll_line_active" :style="{'left':viewLeft}"></view>
			</view>
		</view>
		<!--限时抢券-->
		<view class="content_6" v-if="false">
			<!--时间-->
			<view class="title_6">
				<image class="title_icon_6" src="../../static/index/xsqq.png" mode="scaleToFill"></image>
				<scroll-view scroll-x class="scroll_view_6">
					<block v-for="(qiangquan, index_qiangquan) in quanList" :key="index_qiangquan">
						<view class="time_view" :class="{'time_view_active': quanIndex == index_qiangquan}" @click="changeView(index_qiangquan)">
							<view class="time">{{qiangquan.time}}</view>
							<view class="state">{{qiangquan.state}}</view>
						</view>
					</block>
				</scroll-view>
			</view>
			<!--商品详细-->
			<swiper class="shop_view" :current="quanIndex">
				<block v-for="(shop_view, index_shopView) in shopViewList" :key="index_shopView">
					<swiper-item @touchmove.stop="stopTouch">
						<scroll-view scroll-x class="shop_list_view">
							<block v-for="(shop_detail, index_shop) in shop_view.shopList" :key="index_shop">
								<view class="shop_detail_view">
									<view class="shop_img"></view>
									<view class="shop_name">【抢购】{{shop_detail.shopname}}</view>
									<view class="shop_price">
										<view class="shop_price_1">限时价:{{shop_detail.shopprice_1}}元</view>
										<view class="shop_price_0" style="line-height: 32upx;">{{shop_detail.shopprice_0}}</view>
									</view>
									<view class="btn_6">立即抢</view>
								</view>
							</block>
						</scroll-view>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<!--超市轮播(组件)-->
		<view class="content_7">
			<customSwiper :swiper-list="swiperList" />
		</view>
		<!--全部商品分类-->
		<view class="content_8">
			<scroll-view scroll-x class="shop_type_view">
				<block v-for="(shopType, index_shopType) in shopTypeList" :key="index_shopType">
					<view class="shop_type" :class="{'shop_type_active': typeIndex == index_shopType}" @click="changeTypeView(index_shopType)">{{shopType.types}}
						<view class="shop_line" v-if="typeIndex == index_shopType"></view>
					</view>
				</block>
			</scroll-view>
		</view>
		<!--商品列表-->
		<view class="content_9">
			<scroll-view scroll-y style="height: 660upx;">
				<block v-for="(shopDetail, index_shopDetail) in shopDetailList" :key="index_shopDetail">
					<view class="shop_9">
						<view class="shop_9_left">
							<view class="point" style="top: -10upx;"></view>
							<view class="point" style="bottom: -10upx;"></view>
							<image class="shop_9_left_left" :src="shopDetail.coupon_image"></image>
							<view class="shop_9_left_right">
								<view class="right_shop_name">{{shopDetail.coupon_title}}</view>
								<view class="right_shop_price">
									<view class="shop_price_1" style="margin-right: 28upx;">会员价：{{shopDetail.discount_money}}元</view>
									<view class="shop_price_0" style="font-size: 22upx; height: 32upx; line-height: 38upx;">{{shopDetail.goods_price}}</view>
								</view>
								<view class="right_shop_date">{{shopDetail.coupon_time}}</view>
							</view>
						</view>
						<!--条件判断couponstatus-->
						<view class="shop_9_right" v-if="shopDetail.couponstatus.coupon_status == '-1'" style="background-color: #FFFFFF;border-left: 4upx dashed #EBEBEB;">
							<view style="width: 110upx; height: 110upx; border-radius: 110upx; border: 4upx solid #D6D6D6; display: flex; align-items: center;">
								<view style="width: 65upx; height: 65upx; border-radius: 65upx; border: 3upx solid #D6D6D6; display: flex; margin: 0 auto; align-items: center; position: relative;">
									<view style="width: 75upx; height: 30upx; background-color: #FFFFFF; font-size: 20upx; color: #C5C5C5; text-align: center; line-height: 30upx; position: absolute; left: -5upx;">
										已抢光
									</view>
								</view>
							</view>
						</view>
						<view class="shop_9_right" v-else>
							<view class="shop_num">
								<view class="circle_view">
									<cmd-circle style="margin-left: -6upx;" cid="circle19" type="circle" :percent="shopDetail.percent" :showInfo="false"
									 width="60" stroke-width="6" stroke-shape="round" stroke-color="#FF3939" stroke-background="#FEE3E0"></cmd-circle>
									<view class="circle_bg"></view>
									<view class="circle_text">
										{{shopDetail.percent}}%已抢
									</view>
								</view>
							</view>
							<view class="btn_9" v-if="shopDetail.user_take_coupon_status == '-1'" :class="[shopDetail.user_take_coupon_status == '-1' ? 'btn_9_0' : '',
															 shopDetail.user_take_coupon_status == '1' ? 'btn_9_1' : '',
															 shopDetail.couponstatus.coupon_status == '-1' ? 'btn_9_2' : '']"
							 @click="takeCoupon(index_shopDetail)">立即抢</view>
							<view class="btn_9" v-else :class="[shopDetail.coupon_status.coupon_status == '-1' ? 'btn_9_0' : '',
															 shopDetail.user_take_coupon_status == '1' ? 'btn_9_1' : '',
															 shopDetail.couponstatus.coupon_status == '-1' ? 'btn_9_2' : '']">去使用</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
		<!--底线-->
		<view class="content_10">
			<view class="line_10"></view>
			<view class="text_10">我也是有底线的</view>
			<view class="line_10"></view>
		</view>
	</view>
</template>

<script>
	//引入request.js
	import {
		Request
	} from '../../utils/request.js'
	var app = getApp()

	import customSwiper from '@/components/blackmonth-swiper/index'
	import cmdCircle from "@/components/cmd-circle/cmd-circle.vue"

	export default {
		components: {
			customSwiper,
			cmdCircle,
		},
		data() {
			return {
				req: new Request(),
				localImge: new Request().getHostCfg().url + new Request().getImageUrl(),
				titleBarHeight: '',
				spaceHeight: '',
				top: '',
				viewLeft: '',
				quanIndex: 1,
				typeIndex: 0,
				percent: 36,
				bunnerList: [{
						img: '../../static/index/bunner.png'
					},
					{
						img: '../../static/index/bunner.png'
					},
					{
						img: '../../static/index/bunner.png'
					}
				],
				typesList: [{
						typeicon: '../../static/index/ddyh.png',
						typename: '到店优惠',
						click: 'web',
					},
					{
						typeicon: '../../static/index/wmdj.png',
						typename: '外卖到家',
						click: 'waimai',
					},
					{
						typeicon: '../../static/index/ckd.png',
						typename: '查快递'
					},
					{
						typeicon: '../../static/index/ccj.png',
						typename: '查成绩'
					},
					// {
					// 	typeicon: '../../static/index/ydjm.png',
					// 	typename: '有店加盟'
					// },
					// {
					// 	typeicon: '../../static/index/wdqb.png',
					// 	typename: '我的券包'
					// },
					// {
					// 	typeicon: '../../static/index/lhyk.png',
					// 	typename: '领会员卡'
					// },
					// {
					// 	typeicon: '../../static/index/gzgzh.png',
					// 	typename: '关注公众号'
					// },
				],
				tuangouList: [{
						tuangouicon: '../../static/index/tuangou_1.png',
						tuangouname: '一分拼团',
					},
					{
						tuangouicon: '../../static/index/tuangou_2.png',
						tuangouname: '助力砍价',
					},
					{
						tuangouicon: '../../static/index/tuangou_3.png',
						tuangouname: '免费试用',
					},
					// {
					// 	tuangouicon: '../../static/index/tuangou_4.png',
					// 	tuangouname: '在线直播',
					// },
					// {
					// 	tuangouicon: '../../static/index/tuangou_3.png',
					// 	tuangouname: '在线直播',
					// },
					{
						tuangouicon: '../../static/index/tuangou_1.png',
						tuangouname: '助力砍价',
					},
					{
						tuangouicon: '../../static/index/tuangou_4.png',
						tuangouname: '一分拼团',
					},
					{
						tuangouicon: '../../static/index/tuangou_2.png',
						tuangouname: '免费试用',
					}
				],
				quanList: [{
						time: '20:00',
						state: '已开抢',
					},
					{
						time: '00:00',
						state: '热抢中',
					},
					{
						time: '10:00',
						state: '即将开始',
					},
					{
						time: '14:00',
						state: '即将开始',
					},
					{
						time: '20:00',
						state: '即将开始',
					},
				],
				shopViewList: [{
						shopList: [{
								shopimg: '',
								shopname: '旺仔牛奶',
								shopprice_1: '2',
								shopprice_0: '3.5',
							},
							{
								shopimg: '',
								shopname: '旺仔牛奶',
								shopprice_1: '2',
								shopprice_0: '3.5',
							},
							{
								shopimg: '',
								shopname: '旺仔牛奶',
								shopprice_1: '2',
								shopprice_0: '3.5',
							},
							{
								shopimg: '',
								shopname: '旺仔牛奶',
								shopprice_1: '2',
								shopprice_0: '3.5',
							},
						],
					}, {
						shopList: [{
							shopimg: '',
							shopname: '旺仔牛奶',
							shopprice_1: '2',
							shopprice_0: '3.5',
						}, ],
					},

				],
				swiperList: [{
						url: '../../static/index/shop_banner_1.png'
					},
					{
						url: '../../static/index/shop_banner_1.png',
					},
					{
						url: '../../static/index/shop_banner_1.png'
					},
				],
				shopTypeList: [{
						types: "全部"
					},
					{
						types: "饮品"
					},
					{
						types: "食品"
					},
					{
						types: "用品"
					},
					{
						types: "新鲜品尝"
					}
				],
				shopDetailList: []
			}
		},
		methods: {
			//跳转路由
			GoToPage: function(index) {
				let param = this.typesList[index].click;
				switch (param) {
					case 'waimai':
						uni.switchTab({
							url: '/pages/order/order'
						});
						break;

					case 'web':
						let item = this.typesList[index].url;
						uni.navigateTo({
							url: '/pages/index/web/web?weburl' + encodeURIComponent(JSON.stringify(item)),
						});
						break;

					default:
						new Request().showToast('敬请期待');
				}
				return;
			},
			//打开小程序
			GoToMiniProgram: function(index) {
				let appid = this.tuangouList[index].appid;
				let page = this.tuangouList[index].page;
				uni.navigateToMiniProgram({
					appId: appid,
					path: page,
					extraData: {
						'data1': 'test'
					},
					success(res) {
						// 打开成功
					}
				});
			},
			//弹窗提示 敬请期待
			showToastTips: function() {
				new Request().showToast('敬请期待');
				return;
			},
			moveScroll: function(e) {
				let scrollLeft = Math.round(e.detail.scrollLeft)
				let scrollWidth = Math.round(e.detail.scrollWidth)
				let aa = (scrollLeft / scrollWidth * 100) * 1.75
				this.viewLeft = parseInt(aa) + '%'
			},
			changeView: function(index) {
				this.quanIndex = index
			},
			changeTypeView: function(index) {
				this.typeIndex = index
			},
			//禁止用户滑动滑块
			stopTouch: function() {
				return true;
			},
			//滑动事件
			tabChange: function(e) {
				this.typeIndex = e.detail.current
			},
			//领取优惠券
			takeCoupon: function(id) {
				new Request('coupon/Insert_Coupon/ReceiveCoupon').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							coupon_id: this.shopDetailList[id].coupon_id,
							openid: app.globalData.openid
						}
					},
					(res) => {
						console.log(res)
					}
				)
			}
		},
		onLoad() {
			let req = new Request();
			console.log(new Request().getHostCfg().url + new Request().getImageUrl())
			uni.getSystemInfo({
				success: (res) => {
					this.top = res.statusBarHeight - uni.upx2px(30)
					this.titleBarHeight = res.statusBarHeight + 22
					this.spaceHeight = res.statusBarHeight + 42
				}
			})
			/**
			 * 登录
			 */
			new Request().getLogin(app, (res)=>{
				//获取优惠券列表
				new Request('coupon/Get_Coupon_Info/GetCouponList').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							openid: app.globalData.openid,
							// get_coupon_type: 'drink'
						}
					},
					(res) => {
						if (res.data.code == 0) {
							// new Request('').showToast('没有优惠券', 'none', () => {})
						} else if (res.data.code == 1) {
							this.shopDetailList = res.data.data
						}
					}
				)
			})
			//纶播图列表
			// new Request('banner/Banner_List/GetBannerList').request(
			// 	() => {
			// 		return 'POST';
			// 	},
			// 	() => {
			// 		return {
			// 			appid: app.globalData.appid,
			// 			DevelopVersion: app.globalData.DevelopVersion,
			// 			project: app.globalData.project,
			// 		}
			// 	},
			// 	(res) => {
			// 		if (res.data.code != 0) {
			// 			this.bunnerList = res.data.data;
			// 		}
					
			// 	}
			// );
			//公众号列表
			new Request('Article/Article/GetArticList').request(
				() => {
					return 'POST';
				},
				() => {
					return {
						appid: app.globalData.appid,
						DevelopVersion: app.globalData.DevelopVersion,
						project: app.globalData.project,
					}
				},
				(res) => {
					if (res.data.code != 0) {
						this.typesList = res.data.data;
					}
					
				}
			);
			//小程序跳转列表
			new Request('xcx/Go_To_Xcx/GetXcxList').request(
				() => {
					return 'POST';
				},
				() => {
					return {
						appid: app.globalData.appid,
						DevelopVersion: app.globalData.DevelopVersion,
						project: app.globalData.project,
					}
				},
				(res) => {
					if (res.data.code != 0) {
						this.tuangouList = res.data.data;
					}
				}
			);
		},
		onShow() {
			uni.showTabBar()
		}
	}
</script>

<style scoped>
	.content {
		height: auto;
		padding-bottom: 40upx;
	}

	/*
		顶部导航样式
	*/
	.content_1 {
		width: 750upx;
		background-image: linear-gradient(#E03507, #D62D05); //颜色渐变效果(上下)
		text-align: center;
		padding-top: 48upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: fixed;
		z-index: 999;
	}

	.title_1 {
		color: #FFFFFF;
		font-size: 38rpx;
		margin: 0 auto;
	}

	/*
		搜索框样式
	*/
	.content_2 {
		height: 64upx;
		background-image: linear-gradient(#D62D05, #CD2704); //颜色渐变效果(上下)
		padding: 0 25upx;
		padding-top: 26upx;
		display: flex;
		justify-content: space-between;
	}

	.search {
		width: 544upx;
		height: 64upx;
		background-color: #DA5536;
		border-radius: 65upx;
		padding: 0 28upx;
		display: flex;
		align-items: center;
	}

	.services {
		height: 64upx;
		width: 40upx;
		margin-right: 22upx;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-between;
	}

	.search_icon {
		width: 28upx;
		height: 28upx;
	}

	.search_input {
		font-size: 24upx;
		color: #F8DDD6;
		margin-left: 16upx;
		width: 85%;
	}

	.services_icon {
		height: 32upx;
		width: 32upx;
	}

	.services_text {
		/* width: 40upx;
		height: 28upx; */
		color: #FFFFFF;
		font-size: 20upx;
		border: none;
		padding:0;
		margin: 0;
	}
	button{padding: 0;margin: 0;}
	button::after { 
		border: none; 
	}


	/*
		轮播样式
   */
	.content_3 {
		height: 332upx;
		background-image: linear-gradient(#CD2704, #B21200);
		border-bottom-left-radius: 80% 15%;
		border-bottom-right-radius: 80% 15%;
	}

	.bunner_view {
		margin: 0 25upx;
		height: 296upx;
		padding-top: 54upx;
	}

	.img_3 {
		width: 705upx;
		height: 300upx;
	}

	/*
		分类样式
	*/
	.content_4 {
		/* height: 296upx; */
		height: 150upx;
		margin: 0 25upx;
		margin-top: 50upx;
		padding-top: 38upx;
		padding-bottom: 6upx;
		background-color: #FFFFFF;
		border-radius: 20upx;
		box-shadow: 0upx 0upx 16upx hsl(0, 0%, 90%);
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.types_view {
		height: 130upx;
		width: 156upx;
		padding-bottom: 18upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.types_icon {
		width: 88upx;
		height: 88upx;
	}

	.types_text {
		height: 36upx;
		font-size: 26upx;
	}

	/*
		品牌团购样式
	*/
	.content_5 {
		margin: 0 24upx;
		margin-top: 30upx;
		height: 226upx;
		padding-top: 20upx;
		padding-bottom: 14upx;
		background-color: #FFFFFF;
		box-shadow: 0upx 0upx 16upx hsl(0, 0%, 90%);
		border-radius: 20upx;
	}

	.title_5 {
		width: 240upx;
		height: 48upx;
		margin-left: 20upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.title_5_text {
		font-size: 34upx;
		color: #000000;
		font-weight: bold;
	}

	.title_5_icon {
		width: 92upx;
		height: 40upx;
		background-image: linear-gradient(to right, #FF7119, #FA3018); //颜色渐变效果(从左到右)
		border-top-left-radius: 40upx;
		border-top-right-radius: 40upx;
		border-bottom-right-radius: 40upx;
		line-height: 40upx;
		font-size: 24upx;
		color: #FFFFFF;
		font-weight: bold;
		text-align: center;
	}

	.tuangou_view {
		height: 120upx;
		width: 705upx;
		padding-top: 26upx;
		white-space: nowrap;
		display: flex;
		justify-content: space-between;
	}

	.tuangou_type {
		width: 128upx;
		height: 120upx;
		margin-right: 16upx;
		display: inline-block;
	}

	.tuangou_type_icon {
		width: 80upx;
		height: 80upx;
		border-radius: 80upx;
		margin: 0 auto;
	}

	.tuangou_type_text {
		height: 34upx;
		width: 96upx;
		font-size: 24upx;
		margin: 0 auto;
		margin-top: 8upx;
	}

	/*
		滚动条样式
	*/
	.scroll_line {
		height: 8upx;
		width: 80upx;
		margin: 0 auto;
		margin-top: 26upx;
		background-color: #F3EFEF;
		border-radius: 6upx;
		position: relative;
	}

	.scroll_line_active {
		width: 30upx;
		height: 8upx;
		background-color: #FB3918;
		border-radius: 6upx;
		position: absolute;
	}

	/*
		限时抢券样式
	*/
	.content_6 {
		height: 384upx;
		margin: 0 25upx;
		margin-top: 30upx;
		background-color: #FFFFFF;
		box-shadow: 0upx 0upx 16upx hsl(0, 0%, 90%);
		border-radius: 20upx;
		padding-top: 24upx;
		padding-bottom: 20upx;
	}

	.title_6 {
		height: 66upx;
		padding: 0 18upx;
		display: flex;
		align-items: center;
	}

	.title_icon_6 {
		width: 68upx;
		height: 56upx;
	}

	.scroll_view_6 {
		height: 68upx;
		width: 578upx;
		padding-left: 22upx;
		white-space: nowrap;
	}

	.time_view {
		height: 66upx;
		width: 82upx;
		display: inline-block;
		margin-right: 42upx;
	}

	.time_view_active .time {
		color: #FA2D18;
	}

	.time_view_active .state {
		background-image: linear-gradient(to right, #FF7119, #FA3018);
		border-radius: 30upx;
		color: #FFFFFF;
	}

	.time {
		width: 72upx;
		height: 38upx;
		margin: 0 auto;
		text-align: center;
		line-height: 38upx;
		font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; //字体样式
		font-size: 32upx;
		font-weight: bold;
		color: #595959;
	}

	.state {
		width: 82upx;
		height: 30upx;
		margin: 0 auto;
		text-align: center;
		line-height: 30upx;
		font-size: 20upx;
		color: #595959;
	}

	/*
		抢券商品详细
	*/
	.shop_view {
		height: 288upx;
		width: 704upx;
		margin-top: 30upx;
	}

	.shop_list_view {
		height: 288upx;
		width: 704upx;
		white-space: nowrap;
	}

	.shop_detail_view {
		height: 270upx;
		width: 200upx;
		display: inline-block;
		padding-top: 6upx;
		padding-bottom: 12upx;
	}

	.shop_img {
		width: 108upx;
		height: 140upx;
		margin: 0 auto;
		background-color: #DD524D;
	}

	.shop_name {
		width: 176upx;
		height: 32upx;
		margin: 0 auto;
		margin-top: 8upx;
		font-size: 22upx;
		color: #2D2D2D;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.shop_price {
		width: 176upx;
		height: 32upx;
		margin: 0 auto;
		margin-top: 2upx;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.shop_price_1 {
		height: 32upx;
		color: #F55938;
		font-size: 24upx;
	}

	.shop_price_0 {
		height: 28upx;
		color: #595959;
		font-size: 20upx;
		text-decoration: line-through;
	}

	.btn_6 {
		width: 120upx;
		height: 44upx;
		border: 2upx solid #FF3939;
		border-radius: 44upx;
		line-height: 44upx;
		font-size: 22upx;
		color: #FD3838;
		text-align: center;
		margin: 0 auto;
		margin-top: 10upx;
	}

	/*
		超市轮播样式
	*/
	.content_7 {
		height: 236upx;
		width: 700upx;
		margin: 0 auto;
		margin-top: 20upx;
	}

	/*
		全部商品样式分类
	*/
	.content_8 {
		height: 50upx;
		margin: 0 45upx;
		margin-top: 10upx;
	}

	.shop_type_view {
		height: 50upx;
		width: 664upx;
		white-space: nowrap;
	}

	.shop_type {
		height: 48upx;
		width: auto;
		display: inline-block;
		text-align: center;
		line-height: 48upx;
		margin-right: 56upx;
		font-size: 28upx;
		font-weight: bold;
	}

	.shop_line{
		margin-top: -15upx;
		height: 13upx;
		border-radius: 15upx;
		background-color: #F55938;
	}

	.shop_type_active {
		font-size: 34upx;
		/* border-bottom: 15upx solid #F55938; */
		box-sizing: border-box;
	}

	/*
		商品列表样式
	*/
	.content_9 {
		height: auto;
		margin-top: 30upx;
	}

	.content_9_swiper {
		height: 660upx;
		position: absolute;
		top: 0upx;
		left: 0upx;
		z-index: -9999;
	}

	.content_9_scroll {
		height: auto;
	}

	.shop_9 {
		height: 200upx;
		display: flex;
		margin-bottom: 10upx;
		margin-left: 25upx;
		margin-top: 15upx;
	}

	.shop_9_left {
		height: 150upx;
		width: 486upx;
		background-color: #FFFFFF;
		position: relative;
		border-top-left-radius: 20upx;
		border-bottom-left-radius: 20upx;
		padding: 25upx 0upx;
		padding-left: 18upx;
		padding-right: 6upx;
		box-shadow: -10upx 0upx 15upx rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.shop_9_right {
		width: 126upx;
		height: 170upx;
		background-color: #FEF3F1;
		border-top-right-radius: 20upx;
		border-bottom-right-radius: 20upx;
		box-shadow: 5upx 5upx 15upx rgba(0, 0, 0, 0.1);
		padding: 15upx 35upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}

	.point {
		width: 20upx;
		height: 20upx;
		background-color: #FFFFFF;
		border-radius: 20upx;
		position: absolute;
		right: -12upx;
	}

	.shop_9_left_left {
		width: 142upx;
		height: 116upx;
		background-color: #DD524D;
	}

	.shop_9_left_right {
		height: 150upx;
		width: 315upx;
		display: flex;
		flex-direction: column;
	}

	.right_shop_name {
		height: 72upx;
		width: 315upx;
		font-size: 24upx;
		font-weight: bold;
		color: #2D2D2D;
		line-height: 36upx;
		word-wrap: break-word;
		word-break: normal;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.right_shop_price {
		height: 34upx;
		margin-top: 14upx;
		display: flex;
		align-items: center;
	}

	.right_shop_date {
		height: 28upx;
		margin-top: 2upx;
		font-size: 20upx;
		color: #595959;
		line-height: 28upx;
	}

	.shop_num {
		width: 110upx;
		height: 110upx;
	}

	.btn_9_0 {
		width: 120upx;
		height: 44upx;
		border-radius: 50upx;
		text-align: center;
		line-height: 44upx;
		font-size: 22upx;
		color: #FFFFFF;
		background-image: linear-gradient(to right, #FF7119, #FA3018);
	}

	.btn_9_1 {
		width: 120upx;
		height: 44upx;
		border-radius: 50upx;
		border: 2upx solid #FF3939;
		text-align: center;
		line-height: 44upx;
		font-size: 22upx;
		color: #FF3939;
	}

	.btn_9_2 {
		display: none;
	}

	.circle_view {
		width: 110upx;
		height: 110upx;
		display: flex;
		position: relative;
	}

	.circle_bg {
		width: 82upx;
		height: 82upx;
		background-color: #ffffff;
		position: absolute;
		border-radius: 100upx;
		left: 13upx;
		top: 10upx;
	}

	.circle_text {
		width: 52upx;
		height: 62upx;
		position: absolute;
		left: 30upx;
		top: 23upx;
		word-break: normal;
		font-size: 24upx;
		color: #F55938;
		text-align: center;
		line-height: 31upx;
	}

	/*
		底线样式
	*/
	.content_10 {
		height: 34upx;
		margin: 0upx 210upx;
		margin-top: 66upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.line_10 {
		width: 60upx;
		height: 2upx;
		background-color: #E0E0E0;
	}

	.text_10 {
		font-size: 24upx;
		color: #B7B7B7;
		line-height: 34upx;
		text-align: center;
	}
</style>
